import React, { useState } from 'react';
import {
  Card,
  Button,
  Table,
  Tag,
  Input,
  Select,
  Space,
  Avatar,
  Form,
  Row,
  Col,
  message,
  Modal,
  Tooltip
} from 'antd';
import {
  SearchOutlined,
  PlusOutlined,
  ManOutlined,
  WomanOutlined,
  PhoneOutlined,
  EditOutlined,
  KeyOutlined,
  UndoOutlined,
  ReloadOutlined,
  UserOutlined,
  ExclamationCircleOutlined,
  DownloadOutlined,
  UploadOutlined
} from '@ant-design/icons';
import type { TablePaginationConfig } from 'antd/es/table';
import './index.less';

const { Option } = Select;
const { confirm } = Modal;

interface EmployeeData {
  id: string;
  name: string;
  gender: 'male' | 'female';
  department: string;
  phone: string;
  employeeType: string;
  title: string;
  status: 'active' | 'disabled';
  remarks: string;
  avatar?: string;
}

const Users: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState<boolean>(false);
  const [employees, setEmployees] = useState<EmployeeData[]>([
    {
      id: 'EMP00123',
      name: '张三',
      gender: 'male',
      department: '内科/心血管科',
      phone: '13812345678',
      employeeType: '医生',
      title: '主任医师',
      status: 'active',
      remarks: '心血管专家，周三门诊'
    },
    {
      id: 'EMP00124',
      name: '李四',
      gender: 'male',
      department: '外科/骨科',
      phone: '13912345678',
      employeeType: '医生',
      title: '副主任医师',
      status: 'active',
      remarks: '骨科专家，周一周四门诊'
    },
    {
      id: 'EMP00125',
      name: '王五',
      gender: 'male',
      department: '内科/消化科',
      phone: '13712345678',
      employeeType: '医生',
      title: '主治医师',
      status: 'active',
      remarks: ''
    },
    {
      id: 'EMP00126',
      name: '赵丽',
      gender: 'female',
      department: '妇产科',
      phone: '13612345678',
      employeeType: '医生',
      title: '主任医师',
      status: 'active',
      remarks: '妇科专家，周二周五门诊'
    },
    {
      id: 'EMP00127',
      name: '钱峰',
      gender: 'male',
      department: '儿科',
      phone: '13512345678',
      employeeType: '医生',
      title: '副主任医师',
      status: 'disabled',
      remarks: '产假中'
    },
    {
      id: 'EMP00128',
      name: '孙琳',
      gender: 'female',
      department: '护理部',
      phone: '13412345678',
      employeeType: '护士',
      title: '主管护师',
      status: 'active',
      remarks: ''
    }
  ]);

  const handleSearch = (values: any) => {
    setLoading(true);
    console.log('搜索条件:', values);
    // 此处可以实现实际的搜索逻辑
    setTimeout(() => {
      setLoading(false);
    }, 500);
  };

  const handleReset = () => {
    form.resetFields();
  };

  const handleResetPassword = (record: EmployeeData) => {
    confirm({
      title: '确认重置密码',
      icon: <ExclamationCircleOutlined />,
      content: `确定要重置 ${record.name}(${record.id}) 的密码吗？重置后密码将变为默认密码。`,
      onOk() {
        console.log('重置密码:', record.id);
        // 此处可以实现实际的重置密码逻辑
      }
    });
  };

  const columns = [
    {
      title: '员工',
      dataIndex: 'name',
      key: 'name',
      render: (_, record: EmployeeData) => (
        <div className="employee-cell">
          <Avatar 
            size={40} 
            src={record.avatar}
            style={{ backgroundColor: record.gender === 'male' ? '#1890ff' : '#eb2f96' }}
          >
            {record.name.charAt(0)}
          </Avatar>
          <div className="employee-info">
            <span className="employee-name">
              {record.name}
              {record.gender === 'male' ? (
                <ManOutlined className="gender-icon male" />
              ) : (
                <WomanOutlined className="gender-icon female" />
              )}
            </span>
            <span className="employee-id">{record.id}</span>
          </div>
        </div>
      ),
    },
    {
      title: '部门科室',
      dataIndex: 'department',
      key: 'department'
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
      render: (phone: string) => (
        <div className="phone-cell">
          <PhoneOutlined />
          <span>{phone}</span>
        </div>
      )
    },
    {
      title: '职工类别',
      dataIndex: 'employeeType',
      key: 'employeeType'
    },
    {
      title: '职称',
      dataIndex: 'title',
      key: 'title'
    },
    {
      title: '有效状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'success' : 'error'}>
          {status === 'active' ? '可用' : '禁用'}
        </Tag>
      )
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks',
      ellipsis: {
        showTitle: false,
      },
      render: (remarks: string) => (
        <Tooltip placement="topLeft" title={remarks || '无'}>
          <span>{remarks || '无'}</span>
        </Tooltip>
      )
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: EmployeeData) => (
        <Space size="middle">
          <a onClick={() => handleResetPassword(record)}>重置密码</a>
          <a>编辑</a>
        </Space>
      ),
    },
  ];

  const paginationProps: TablePaginationConfig = {
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total) => `共 ${total} 条`,
    pageSize: 10,
    total: 100,
  };

  return (
    <div className="users-container">
      <Card title="员工档案" bordered={false}>
        <div className="search-container">
          <Form
            form={form}
            layout="inline"
            className="search-form"
            onFinish={handleSearch}
          >
            <Form.Item name="keyword" label="员工姓名/工号">
              <Input placeholder="请输入" allowClear />
            </Form.Item>
            <Form.Item name="department" label="部门科室">
              <Select placeholder="请选择" style={{ width: 200 }} allowClear>
                <Option value="内科">内科</Option>
                <Option value="外科">外科</Option>
                <Option value="妇产科">妇产科</Option>
                <Option value="儿科">儿科</Option>
                <Option value="护理部">护理部</Option>
              </Select>
            </Form.Item>
            <Form.Item name="status" label="状态">
              <Select placeholder="请选择" style={{ width: 120 }} allowClear>
                <Option value="active">可用</Option>
                <Option value="disabled">禁用</Option>
              </Select>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                搜索
              </Button>
            </Form.Item>
            <Form.Item>
              <Button icon={<ReloadOutlined />} onClick={handleReset}>
                重置
              </Button>
            </Form.Item>
          </Form>
          <Space>
            <Button type="primary" icon={<PlusOutlined />}>新增员工</Button>
            <Button icon={<UploadOutlined />}>批量导入</Button>
            <Button icon={<DownloadOutlined />}>导出员工</Button>
          </Space>
        </div>

        <Table
          rowKey="id"
          loading={loading}
          columns={columns}
          dataSource={employees}
          pagination={paginationProps}
        />
      </Card>
    </div>
  );
};

export default Users; 
